import React from 'react';
import {
  StyleSheet,
  Text,
  Image,
  View,
  SafeAreaView,
  Button,
} from 'react-native';
const codeImage = require('../../assets/code.png');

const RechargeSure = ({navigation}) => {
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.rechargeCode}>
          <View style={styles.rechargeCodeImageContainer}>
            <Image style={styles.rechargeCodeImage} source={codeImage} />
          </View>
        </View>
        <View style={styles.rechargeAmount}>
          <Text style={styles.rechargeAmountText1}>充值金額：</Text>
          <Text style={styles.rechargeAmountText2}>50 USDT</Text>
        </View>
        <View style={styles.RechargeSure}>
          <View style={styles.backButton}>
            <Button
              title="重選金額"
              color="#aaa"
              onPress={() => navigation.navigate('RechargeScreen')}
            />
          </View>
          <View style={styles.sureButton}>
            <Button
              title="充值"
              color="#ff9800"
              onPress={() => navigation.navigate('HomeScreen')}
            />
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingTop: 60,
    paddingLeft: 50,
    paddingRight: 50,
  },
  rechargeCode: {
    height: 106,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  rechargeCodeImageContainer: {
    height: 106,
    width: 106,
    backgroundColor: 'white',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  rechargeCodeImage: {
    height: 76,
    width: 76,
  },
  rechargeAmount: {
    marginTop: 40,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  rechargeAmountText1: {
    fontSize: 20,
    lineHeight: 30,
    color: '#363636',
    fontWeight: 'bold',
  },
  rechargeAmountText2: {
    fontSize: 20,
    lineHeight: 30,
    color: '#363636',
    fontWeight: 'bold',
  },
  amount: {
    marginTop: 10,
  },
  amountText: {
    fontSize: 14,
    fontWeight: 'bold',
    lineHeight: 30,
  },

  RechargeSure: {
    marginTop: 180,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  backButton: {
    width: 100,
  },
  sureButton: {
    width: 100,
    marginLeft: 20,
  },
});

export default RechargeSure;
